<template>
  <el-container>
    <el-header>
      <el-row>
        <el-col :span="24" class="header">
          <h1>{{ company.farmName }}</h1>
        </el-col>
      </el-row>
    </el-header>

    <el-main>
      <el-container>


        <el-main>
          <el-row>
            <el-col :span="12" class="content">
              <el-image :src="cover" fit="fill" :lazy="true"></el-image>
            </el-col>
            <el-col :span="12" class="content">
              <p>{{ company.introduction }}</p>

              <h2>负责人</h2>
              <p>用户名：{{ user.username }}</p>
              <p>电话：{{ user.phone }}</p>
            </el-col>
          </el-row>
          <el-divider direction="horizontal" content-position="left"></el-divider>
          <el-row>
            <el-col :span="24" class="content">
              <h2>主要供应</h2>
            </el-col>
            <el-row :gutter="20" class="product-list">
              <el-col :span="8" v-for="product in products" :key="product.id">
                <el-card :body-style="{ padding: '20px' }">
                  <div class="card-content">
                    <h3>{{ product.productName }}</h3>
                    <p>月需求量: {{ product.monthlyProduction }} 吨</p>
                    <p>年需求量: {{ product.yearlyProduction }} 吨</p>
                    <p>说明: {{ product.status }} </p>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-row>
        </el-main>
      </el-container>
    </el-main>


  </el-container>
</template>

<script>
export default {
  data() {
    return {
      products: [], // 存储产品列
      company: {},
      user: {},
      cover: 'http://cdn.qiniu.liyansheng.top/img/20240811170807.png'
    };
  },
  created() {
    this.fetchProducts();
    this.fetchCompany();
    this.fetchUser();
  },
  methods: {
    async fetchProducts() {
      try {
        this.$axios.get('/product/' + this.$route.params.id).then(
          res => {
            this.products = res.data
          }
        ) // 获取产品列表
      } catch (error) {
        console.error('获取产品列表失败:', error);
      }
    },
    async fetchCompany() {
      try {
        this.$axios.get('/farmer/' + this.$route.params.id).then(
          res => {
            this.company = res.data
          }
        )
      } catch (error) {
        console.error('获取公司信息失败:', error);
      }
    },
    async fetchUser() {
      try {
        this.$axios.get('/user/' + this.$route.params.id).then(
          res => {
            this.user = res.data
          }
        )
      } catch (error) {
        console.error('获取用户信息失败:', error);
      }
    }
  }
};
</script>

<style scoped>
.header {
  text-align: center;
  padding: 20px;
  background-color: #f4f4f4;
}

.sidebar {
  background-color: #f9f9f9;
  padding: 20px;
}

.content {
  padding: 20px;
}

.el-footer {
  text-align: center;
  padding: 10px;
  background-color: #f4f4f4;
}
</style>